import { useState, useEffect } from 'react';
import styled from 'styled-components';
import { SearchPanel } from "./search-panel";
import { List } from "./list";
import { useHttp } from 'utils/http';
import { Dispatch, SetStateAction } from 'react';
import { UserProps } from 'type/user';
import { useAsync } from 'utils/hooks/use-async';
import { useDocumentTitle } from 'utils/hooks/use-document-title';
import { TryHookClosure } from '__try__/try-hook-closure';
import { IdSelect } from 'components/id-select';
import { ProjectModal } from './project-modal';

export const ProjectList = ({ open: [show, setShow] }: { open: [boolean, Dispatch<SetStateAction<boolean>>] }) => {
  const [param, setParam] = useState({
    name: '',
    personId: ''
  });

  const httpClient = useHttp();
  const usersAsync = useAsync<any[]>();
  const listsAsync = useAsync<any[]>();
  const testSelect = (value?: Number) => {
    console.log(value);
  }

  useDocumentTitle('项目列表');
  useEffect(() => {
    usersAsync.run(httpClient('users'));
  }, [param]);

  useEffect(() => {
    listsAsync.run(httpClient('projects'));
  }, []);

  return (
    <ProjectListContainer>
      <h1>项目列表</h1>
      {/* <TryHookClosure /> */}
      <IdSelect value={0} options={[{ name: '0', id: 0 }, { name: '1', id: 1 }, { name: '2', id: 2 }]} onChang={testSelect}></IdSelect>
      <SearchPanel users={usersAsync.data} param={param} setParam={setParam} />
      {listsAsync.error ? <div>{listsAsync.error.message}</div> : <List users={usersAsync.data || []} lists={listsAsync.data || []} loading={listsAsync.isLoading} />}
      <ProjectModal open={[show, setShow]} />
    </ProjectListContainer>
  )
}

const ProjectListContainer = styled.div`
  h1 {
    font-size: 32px;
  }
`;